// margin padding
$distance-list: 0, 5, 10, 15, 20, 30, 60, 100;

@each $distance in $distance-list {
  .app-mt-#{$distance} {
    margin-top: $distance + px;
  }
  .app-mr-#{$distance} {
    margin-right: $distance + px;
  }
  .app-mb-#{$distance} {
    margin-bottom: $distance + px;
  }
  .app-ml-#{$distance} {
    margin-left: $distance + px;
  }
  .app-mg-#{$distance} {
    margin: $distance + px;
  }

  .app-pt-#{$distance} {
    padding-top: $distance + px;
  }
  .app-pr-#{$distance} {
    padding-right: $distance + px;
  }
  .app-pb-#{$distance} {
    padding-bottom: $distance + px;
  }
  .app-pl-#{$distance} {
    padding-left: $distance + px;
  }
  .app-pd-#{$distance} {
    padding: $distance + px;
  }
}

// flex
$flex-list: 0, 1, 2, 3, 4, 5;
@each $flex in $flex-list {
  .app-flex-#{$flex} {
    flex: $flex;
  }
}
